<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="/WEB-INF/tlds/nodes-faces.tld" prefix="n" %>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <f:view>
        <head>
            <jsp:directive.include file="../common/head.jsp"/>
            <base target="contentFrame"/>
            <style type="text/css">
                html, body, #navigationBar, #applet {
                    height:100%;
                    width:100%;
                }
                
                html, body, #navigationBar, #actionBar, #cardSelector, #applet {
                    margin:0; padding:0;
                }
                               
                applet, object {
                    display:block;
                }

                .card-selected, .card-unselected {
                    cursor:pointer; font-size:12px; width:40px;
                }

                .card-selected:hover, .card-unselected:hover {
                    text-decoration:underline;
                }

                .card-unselected {
                    color:gray;
                }

                .card-selected {
                    color: #335A9D; 
                }

                #actionBar {
                    margin-left:10px; margin-bottom:10px;
                }
                
                #cardSelector {
                    height:30px; margin-left:10px;
                }
                
                #applet {
                    margin-left:5px;
                }

            </style>            
            <script language="JavaScript" type="text/javascript">
                var current = "repository";
                
                function showCard(name) {
                    var currentCard = window.document.getElementById(current);
                    currentCard.className = "card-unselected";
                    var newCard = window.document.getElementById(name);
                    newCard.className = "card-selected";
                    current = name;
                    
                    var navigationApplet = window.document.getElementById("navigationApplet");
                    navigationApplet.show(name);
                }

                var currentAppletHeight = 0;
                var currentAppletWidth = 0;
                
                function resizeApplet() {
                    var totalHeight = document.getElementById("navigationBar").offsetHeight;
                    var actionHeight = document.getElementById("actionBar").offsetHeight;
                    var appletHeight = totalHeight - actionHeight - 60;
                    
                    if (appletHeight != currentAppletHeight) {
                        var applet = document.getElementById("applet");
                        applet.style.height = appletHeight + 'px';

                        currentAppletHeight = appletHeight;
                    }
                    
                    var totalWidth = document.getElementById("navigationBar").offsetWidth;
                    var appletWidth = totalWidth - 10;
                    
                    if (appletWidth != currentAppletWidth) {       
                        var applet = document.getElementById("applet");
                        applet.style.width = appletWidth + 'px';

                        currentAppletWidth = appletWidth;
                    }
                    
                }
                
                function highlight(elem) {
                    var color = 180;
                    
                    elem.scrollIntoView(true);
	
                    function drawBackground() {
                        color = Math.min(color + 1, 255);

                        elem.style.backgroundColor = 'rgb(' + color + ','+ color + ',' + color + ')';

                        if (color >= 255)
                            clearInterval(id);
                    }

                    var id = setInterval(drawBackground, 25);
                }                
            </script>           
        </head>

        <body onresize="resizeApplet()">
            <f:loadBundle basename="offset.nodes.server.view.ApplicationResource" var="msg"/>
                        
            <div id="navigationBar">
                <div id="actionBar">
                </div>

                <div id="cardSelector">
                    <h:outputText escape="false" value='<span id="repository" onclick="showCard(\'repository\')" class="card-selected">#{msg.navigationCardRepository}</span>'/>
                    &nbsp;
                    <h:outputText escape="false" value='<span id="headings" onclick="showCard(\'headings\')" class="card-unselected">#{msg.navigationCardHeadings}</span>'/>
                    &nbsp;
                    <h:outputText escape="false" value='<span id="virtual" onclick="showCard(\'virtual\')" class="card-unselected">#{msg.navigationCardVirtual}</span>'/>
                </div>


                <div id ="applet">
                    <n:applet appletId="navigationApplet" code="offset.nodes.client.dialog.navigation.view.NavigationApplet" codebase="#{NodesBean.contextPath}" jar="dialog.jar"
                              width="100%" height="100%" jre="1.6">
                        <f:param name="service" value="#{NodesBean.dialogPath}"/>
                        <f:param name="repository" value="#{NodesBean.repositoryPath}"/>      
                        <f:param name="configFiles" value="#{NodesBean.clientConfigFiles}"/>                        
                    </n:applet>
                </div>
            </div>

        </body>
    </f:view>
</html>